<template>
  <view class="familyJournal allColumnCenter">
    <s-header-title ref="headerTitle" isDisplayBack title="家庭日志" is-fixed :background="'#FFFFFF'"
                  @getPageHeight="getPageHeight">
      <template>
        <view class="familyJournal_headerTitle">
          <text class="familyJournal_headerTitle_text">
            {{ familyName }}
          </text>
        </view>
      </template>
    </s-header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <scroll-view :scroll-y="true" @scrolltolower="familyJournalScrolltolower" :style="{
      height:`calc(100vh - ${headerHeight}px)`
    }">
      <view class="journalList column items-center" v-for="(item,index) in familyJournalList" :key="index">
        <view class="hW_20"></view>
        <view class="time flex align-center justify-center">
          {{ dayjs(item.createtime * 1000).format('YYYY年MM月DD日 HH:mm:ss') }}
        </view>
        <view class="list flex align-center">
          <image :src="`${IMG_URL}message_icon.png`"></image>
          <text class="content ml_12">
            {{ item.content.username }}{{ item.content.type }}{{ item.content.text }}
          </text>
        </view>
      </view>
      <view class="hW_100"
            v-if="familyJournalParam.page * familyJournalParam.pagesize >= familyJournalParam.total"></view>
    </scroll-view>
  </view>
</template>

<script>

  import HeaderTitle from '@/pages/familyPage/components/headerTitle.vue';
  import dayjs from 'dayjs';
  import sheep from '@/sheep';

  export default {
    components: { HeaderTitle },
    data() {
      return {
        headerHeight: 0,
        familyName: '',
        familyJournalList: [],
        familyJournalParam: {
          page: 1,
          pagesize: 15,
          family_id: '',
          total: 0,
        },
      };
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    onLoad() {

    },
    async mounted() {
      this.familyName = JSON.parse(uni.getStorageSync('familyJournalName')).name;
      this.familyJournalParam.family_id = JSON.parse(uni.getStorageSync('familyJournalName')).id;
      uni.removeStorageSync('familyJournalName');
      await this.clearJournalList();
      await this.getFamilyJournalList();
    },
    methods: {
      dayjs,
      // 获取头部高度
      getPageHeight(number) {
        this.headerHeight = number;
      },
      // 清空日志列表
      clearJournalList() {
        this.familyJournalList = [];
        this.familyJournalParam.page = 1;
        this.familyJournalParam.total = 0;
      },
      // 获取家庭日志列表
      async getFamilyJournalList() {
        let { data } = await sheep.$api.family.getFamilyLog(this.familyJournalParam);
        this.familyJournalParam.total = data.count;
        data.list.forEach(item => {
          this.familyJournalList.push(item);
        });
      },
      // 获取更多日志列表
      async familyJournalScrolltolower() {
        if (this.familyJournalParam.page * this.familyJournalParam.pagesize < this.familyJournalParam.total) {
          this.familyJournalParam.page = this.familyJournalParam.page + 1;
          await this.getFamilyJournalList();
        }
      },
    },
  };
</script>

<style lang="scss">
  .familyJournal {
    width: 750rpx;
    min-height: 100vh;
    background: #F5F5F5;
    overflow: hidden;

    .familyJournal_headerTitle {
      position: absolute;
      bottom: -26rpx;
      left: 50%;
      transform: translateX(-50%);

      .familyJournal_headerTitle_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #A0A0A0;
      }
    }
  }

  .journalList {
    width: 750rpx;

    .time {
      width: 702rpx;
      padding: 10rpx 0;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #A0A0A0;
    }

    .list {
      padding: 20rpx 15rpx;
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 15rpx 15rpx 15rpx 15rpx;
      overflow: hidden;

      image {
        width: 45rpx;
        height: 38rpx;
      }

      .content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #696969;
      }
    }
  }
</style>
